<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../../../lib/html5shiv.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../../lib/respond.min.js?rev=@@hash"></script>
	<![endif]-->
	<!--引入分页-->
	<link rel="stylesheet" href="../../../lib/pagination/pagination.css">
	<link rel="stylesheet" type="text/css" href="../../../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../../../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../../ht-css/Project.css" />
	<!--表单验证-->
	<link rel="stylesheet" type="text/css" href="../../../lib/Validform/5.3.2/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="../../../lib/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="../../../ht-css/style-q.css" />
	<link rel="stylesheet" href="../../../ht-css/combo.select.css">
	<title>商品管理</title>
	<style>
		.relation {
			background: #FFFFFF;
			border: 1px solid #00a0e9;
		}

		.relation li {
			line-height: 2;
		}

		.relation li:hover {
			background: #00a0e9;
			color: #FFFFFF;
		}

		.guanlian {
			position: absolute;
			top: 35px;
			width: 100%;
			overflow-y: scroll;
			max-height: 150px;
			display: none;
		}

		.guanlian li {
			text-indent: 20px;
		}

		.pagination li {
			float: left;
			margin-left: 5px;
			width: 26px;
			height: 26px;
			border: 1px solid #ccc;
			text-align: center;
			color: #666;
		}

		.pagination li:hover {
			background-color: #5a98de;
		}

		.pagination li:hover a {
			color: #fff;
		}
	</style>
</head>

<body>
<article class="page-container">
	<div class="ml-20 mr-20" id="spuInfo" method="post">
		<div id="tab_topnav" class="HuiTab">
			<div class="tabBar clearfix"><span>本地上传</span></div>
			<!--本地上传-->
			<form id="addPicForm">
				<div class="tabCon pd-5 bg-1 bk-gray pb-10" style="display: block">
					<div class="lh-30 pd-10">
						<form>
							<table class="table-hover table_li ml-10 mb-10 table">
								<thead class="text-l">
								<div class="mt-15 mb-30 imgTable clearfix">
									<div class="formControls f-l">
										<span id="imgBox">
										</span>
										<!--<ul class="f-l ml-5 addSpuImgbox">
										</ul>
										<a onclick="addBtn()">添加</a>&nbsp;&nbsp;&nbsp;&nbsp;<a  type="reset" onclick="resetDiv()" >重置</a>
										<input id="fileUp" type="file" multiple="multiple" onchange="putDataToPage(event)" style="display: none"></div>-->
									<input type="button" class="btn btn-secondary radius size-S botter f-l" onclick="addBtn()" value="选择图片">
									<input id="fileUp" type="file" multiple="multiple" onchange="putDataToPage(event)" style="display: none"></div>
								</div>
								</thead>
							</table>
							<div class="text-c mb-10">
								<input  type="button" class="btn btn-secondary radius size-S botter" onclick="selectThis()" value="&nbsp;确&nbsp;&nbsp;定&nbsp;">
								<input  type="reset" onclick="cancle()" class="btn radius size-S botter ml-10" value="&nbsp;取&nbsp;&nbsp;消&nbsp;">
							</div>
						</form>
					</div>
				</div>
			</form>
		</div>
	</div>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script>
<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script src="../../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../ht-js/frame/doT.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/jquery.combo.select.js?rev=@@hash"></script>
<script src="../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../ht-js/Project.js?rev=@@hash"></script>
<script>
	/*$(document).ready(function () {
		if (sessionStorage.getItem("isadd") == "false") {
			$("#fileUp").removeAttr("multiple");
		}
	});*/
    function addBtn() {
		var fileUpEl = document.getElementById('fileUp');
		fileUpEl.outerHTML=fileUpEl.outerHTML;
        // $("#fileUp").trigger('click');
			if($("#imgBox").children().length>=5){
				layer.msg('单次批量上传图片最多5张', {icon: 6,time:1000});
			}else {
				$("#fileUp").trigger('click');  //触发putDateToPage 方法
			}
    }
    var formData = new FormData();
    var num = 0 ;
    var upFileList = [] ;
    function putDataToPage(e) {
        for (var i = 0; i < e.target.files.length; i++) {  //一次上传的图片数量
			if (num >=5){return}
			if(i<5&&num+i<5) {
				var file = e.target.files.item(i);  //遍历每一个上传的文件
				if (!(/^image\/.*$/i.test(file.type))) {
					continue; //不是图片 就跳出这一次循环
				}
                if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name) ) {
                    $.Huimodalalert("不支持该类型文件的上传",2000);
                    return false;
                }
				upFileList.push(file) ;
				//实例化FileReader API
				var freader = new FileReader();
				freader.readAsDataURL(file);
				freader.onload = function(e) {
					if(num<5){
						// $("#imgBox").append('<img id="images' + num + '" src="'+ e.target.result + '" style="width:200px;height:200px" class="mr-10">') ;
						$("#imgBox").append('<div class="f-l ml-5 mt-5"><img id="images' + num + '" src="'+ e.target.result + '" style="width:200px;height:200px" class="mr-10"><a onclick="deleteImgFn('+num+',this)" class="text-c" style="display: block;">删除</a></div>') ;
						num++;
					}
				}
			}
        }
    }
    var btnCount = 0;
    var JsonObject =JSON.parse(decodeURIComponent(web.readCookie("loginData")));

	//删除本地上传图片
	function deleteImgFn(index,el) {
		num--;
		upFileList.splice(index, 1);
		$(el).parent().remove();
	}
	// 本地上传确定
    function selectThis() {
            if (upFileList.length == 0) {
                layer.msg("请选择图片！", {icon: 5,time: 2000});
                return false;
            }
            if(btnCount == 0){  //只能点击一次删除按钮
                btnCount = 1;
                formData = new FormData();
//                formData.append('file', $("#fileUp")[0].files[0]);
                for (var i=0;i<upFileList.length;i++){
                    formData.append('file',upFileList[i]);
                }
                proofDetailList=[];
                $.Huimodalalert("正在上传, 请稍等...",2000);
                $.ajax({
                    url: 'https://'+ window.location.host +'/api/pc/baseservice/uploadForIE8',
                    // url: 'http://localhost:7090/aproduct/img/saveImg',
                    cache: false,  //禁用缓存
                    type: "POST",
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    data: formData,
                    success: function (data) {
                        if(data!=null){
                            data = eval(data)
                            var arr=data;
                            $.each(arr,function(k,v) {
                                if (v.errorCode == 0) {
                                    proofDetailList.push(v.fullPath);
                                }
                            })
						}
						uploadProofFunction(proofDetailList,sessionStorage.getItem("orderId"));

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.Huimodalalert("系统服务异常",2000);
                    }
                });
            }else {
                $.Huimodalalert("正在上传请稍等。。。",2000);
			}
    }

    function cancle() {
        layer.confirm('确认要取消吗？',function(index){
            layer.msg('已取消', {
                icon: 1,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                parent.layer.closeAll();
            });
        });
    }
    // 提示信息
    function showmsg(msg,icon){
        layer.msg(msg, {
            icon:icon,
            time: 1000
        },function(){
            if(icon==6){
                var index =  parent.location.reload();
                parent.layer.close(index);
            }
        });
    }

    /*tab切换*/
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }
    $(function () {
        $.Huitab("#tab_topnav .tabBar span", "#tab_topnav .tabCon", "current", "click", "0")
    });

    function  uploadProofFunction(proofList,orderId){
        console.log(proofDetailList);
        $.ajax({
            type: "POST",
            cache: false, //禁用缓存
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            url: root.dockingplatform.uploadProof,
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            data: JSON.stringify({
                orderId: orderId,
                proofDetailList: proofList
                /*        operateUserId: JSON.parse(decodeURIComponent(web.readCookie("loginData"))).user.user_ID,
                        operateUserName: JSON.parse(decodeURIComponent(web.readCookie("loginData"))).user.name,
                        operatorCode:JSON.parse(decodeURIComponent(web.readCookie("loginData"))).user.number*/
            }),
            success: function (result) {
                if (result.errorCode=="0"){
                    showmsg("上传成功",6);
                }
                if (result.errorCode!="0"){
                    showmsg(result.msg,6);
                }
            }

        })
	}
</script>
</body>
</html>